<template>
  <div class="signin">
    <div class="signinpanel">
      <div class="elForm">
        <h4>登录：</h4>
        <p>你若不离不弃，我必生死相依</p>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >
          <el-form-item label="账号：" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input v-model="ruleForm.password" placeholder="请输入密码" />
          </el-form-item>
          <el-row justify="end">
            <el-col :span="6">
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                登录
              </el-button></el-col
            >
            <el-col :span="6">
              <el-button @click="resetForm(ruleFormRef)"
                >重置</el-button
              ></el-col
            >
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store";
import { reactive, ref, onMounted, onBeforeMount } from "vue";
import type { FormInstance, FormRules } from "element-plus";
const router = useRouter();
interface RuleForm {
  name: string;
  password: string;
}

const store = useUserStore();

console.log(store.token, "token2");

const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  name: "admin",
  password: "",
});

onMounted(() => {
  // 不生效
  // ruleForm.password='3'
});
onBeforeMount(() => {
  // ruleForm.password='4'
});
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, max: 20, message: "长度应为 3 到 20 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度应为 6 到 20 个字符", trigger: "blur" },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(valid, fields, "submit!");
      if (ruleForm.name == "admin" && ruleForm.password == "123456") {
        store.getToken("token12346");
        ElMessage({
          message: "登录成功",
          type: "success",
        });
        store.fetchUserInfo();
        router.push({ path: "/" });
      } else {
        ElMessage({
          message: "账号密码有误！",
          type: "error",
        });
      }
    } else {
      console.log("error submit!", fields);
      if (fields) {
        const firstField = Object.keys(fields)[0]; // 现在 fields 肯定不是 undefined
        const firstError = fields[firstField][0];
        console.log(
          `字段: ${firstError.field}, 错误信息: ${firstError.message}`
        );

        ElMessage({
          message: firstError.message,
          type: "error",
        });
      }
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  ElMessage({
    message: "重置成功",
    type: "success",
  });
};
</script>

<style scoped>
.signin {
  height: 100vh;
  background: url("http://demo.ruoyi.vip/img/login-background.jpg") no-repeat
    center / cover;
  background-size: cover;
  color: #fff;
}

.signinpanel {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.elForm {
  width: 700px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 3px 0 rgba(12, 12, 12, 0.03);
  padding: 30px;
  border-radius: 10px;
}
</style>
